<template>
	<div id="changepwd">
		<el-form :model="registerForm" :rules="rules" ref="registerForm" label-position="top">
			<p class="StepTitle">修改密码 </p>
			<el-form-item label="手机号" prop="phoneNumber">
				<el-input clearable v-model="registerForm.phoneNumber" placeholder="请输入手机号" maxlength="11">
				</el-input>
			</el-form-item>
			<el-form-item label="验证码" prop="verifyCode">
				<el-input clearable v-model="registerForm.verifyCode" maxlength="6" placeholder="请输入验证码">
					<el-button :disabled="disabled" slot="append" @click="sendCodeReg()">{{sendCodeText}}</el-button>
				</el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input clearable show-password v-model="registerForm.password" placeholder="请输入密码"></el-input>
			</el-form-item>
			<el-form-item label="确认密码" prop="repeatPassword">
				<el-input clearable show-password v-model="registerForm.repeatPassword"
					placeholder="请输入确认密码"></el-input>
			</el-form-item>
			<el-form-item>
				<div class="options">
					<el-button class="bank" @click="bank()">返回</el-button>
					<el-button class="next" @click="onSubmit('registerForm')">确认修改</el-button>
				</div>
			</el-form-item>
		</el-form>

		<el-dialog custom-class="verification" title="机器验证" v-if="verification" :visible.sync="verification"
			width="320px" center>
			<verification @update-data="handleUpdateData"></verification>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getDoctorInfo,
		sendCode,
		changePassword,
		getAssistantInfo,
		changeAssistantPwd
	} from '@/request/api.js';
	import verification from '@/components/verification.vue';
	export default {
		name: 'forgetPwd',
		components: {
			verification
		},
		data() {
			return {
				verification: false,
				checked: true,
				seconds: 60,
				disabled: false,
				sendCodeText: '获取验证码',
				registerForm: {
					phoneNumber: '',
					verifyCode: '',
					password: '',
					repeatPassword: ''
				},
				rules: {
					phoneNumber: [{
						required: true,
						message: '请输入手机号',
						trigger: 'change'
					}, {
						validator: (rule, value, callback) => {
							if (!/^1[3-9]\d{9}$/.test(value)) {
								callback(new Error('请输入正确的手机号!'));
							} else {
								callback();
							}
						},
						trigger: 'blur'
					}],
					verifyCode: [{
						required: true,
						message: '请输入验证码',
						trigger: 'change'
					}, {
						min: 4,
						max: 6,
						message: '请输入正确的验证码格式',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'change'
					}, {
						min: 4,
						message: '请至少输入6位字符的密码',
						trigger: 'blur'
					}],
					repeatPassword: [{
						required: true,
						message: '请输入确认密码',
						trigger: 'change'
					}, {
						validator: (rule, value, callback) => {
							if (value !== this.registerForm.password) {
								callback(new Error('两次输入密码不一致!'));
							} else {
								callback();
							}
						},
						trigger: 'change'
					}]
				}
			}
		},
		created() {
			// console.log(this.$route.query.status)
			// this.getDocInfo();
		},
		mounted() {},
		methods: {
			// 子组件传值
			handleUpdateData(data) {
				if (data.type) {
					console.log(data, '验证成功')
					this.verification = false;
					this.sendCodeFun(data.id);
				}
			},

			// 获取验证码
			sendCodeReg(e) {
				let valueReg = /^1[3-9]\d{9}$/;
				if (!this.registerForm.phoneNumber) {
					this.$notify({
						title: '提示',
						type: 'warning',
						message: '请输入手机号',
						position: 'bottom-right'
					});
					return false;
				} else if (!/^1[3-9]\d{9}$/.test(this.registerForm.phoneNumber)) {
					this.$notify({
						title: '提示',
						type: 'warning',
						message: '请输入正确的手机号',
						position: 'bottom-right'
					});
					return false;
				} else {
					this.verification = true;
					console.log("获取验证码")
				};
			},

			sendCodeFun(id) {
				sendCode({
					phone: this.registerForm.phoneNumber,
					id: id
				}).then(res => {
					this.countDown();
				})
			},
			// 倒计时
			countDown() {
				this.disabled = true;
				this.sendCodeText = `${this.seconds}秒后重新获取`;
				if (this.seconds > 0) {
					this.seconds--;
					setTimeout(() => {
						this.countDown(this.seconds)
					}, 1000);
				} else {
					this.sendCodeText = '再次获取';
					this.disabled = false;
					this.seconds = 60;
				};
			},

			onSubmit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (this.$route.query.status == "d" || this.$route.query.status == "forget") {
							changePassword(this.registerForm).then(res => {
								if (res.code == 200) {
									this.$notify({
										title: '提示',
										type: 'success',
										message: '修改密码成功',
										position: 'bottom-right'
									});
									this.$router.go(-1);
								} else {
									this.$notify({
										title: '错误',
										type: 'error',
										message: res.msg,
										position: 'bottom-right'
									});
								};
							});
						} else {
							changeAssistantPwd(this.registerForm).then(res => {
								if (res.code == 200) {
									// localStorage.setItem('regToken', JSON.stringify(res.data));
									this.$notify({
										title: '提示',
										type: 'success',
										message: '修改密码成功',
										position: 'bottom-right'
									});
									this.$router.go(-1);
								} else {
									this.$notify({
										title: '错误',
										type: 'error',
										message: res.msg,
										position: 'bottom-right'
									});
								};
							});
						};
					} else {
						console.log('error submit!!');
						return false;
					};
				});
			},
			bank() {
				this.$router.go(-1);
			}
		}
	}
</script>

<style lang="scss" scoped>
	#changepwd {
		padding: 20px;
		height: 100vh;

		.StepTitle {
			width: 100%;
			font-size: 22px;
			color: #112950;
			// border-bottom: 1px solid #E5E5E5;
			padding-bottom: 10px;
			margin-bottom: 20px;
		}

		::v-deep .el-form {
			background-color: #fff;
			width: 600px;
			height: auto;
			padding: 50px;
			margin: 20px auto;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
			border-radius: 10px;

			.el-form-item__label {
				padding: 0;
				line-height: 1;
				color: #112950;
			}

			.el-input__inner {
				border: none;
				border-bottom: 1px solid #E5E5E5;
				border-radius: 0;
			}

			.el-input-group__append {
				background-color: #fff;
				border: none;
				border-bottom: 1px solid #E5E5E5;
			}

			.el-checkbox {
				display: flex;
				align-items: center;
			}

			.options {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;

				.el-button {
					width: 300px;
					height: 50px;

				}

				.next {
					background-color: #007AFF;
					color: #fff;
				}

				.back {}
			}
		}

	}
</style>